@use "src/web/browser-window/lib" as lib;
@import "src/web/variables";

@mixin account-title-button($color, $border: $color) {
    @include button-variant($color, $border);

    &:focus {
        outline: none;
        box-shadow: none;
    }
}

:host {
    display: flex;
    padding: 0;
    position: relative;

    .dropdown-menu {
        font-size: $app-font-size-base-small;
        min-width: 0;
    }

    .btn-group {
        display: flex;
        flex-grow: 1;

        &.selected {
            .btn {
                @include account-title-button(
                    map_get($app-account-title-btn-colors, "selected-bg"),
                    map_get($app-account-title-btn-colors, "selected-border"),
                );

                &:nth-child(2) {
                    .fa {
                        &.syncing {
                            color: theme-color("primary");
                        }
                    }
                }
            }

            .btn,
            .login-delay {
                color: map_get($app-account-title-btn-colors, "selected-text");
            }
        }

        > .btn {
            &:nth-child(1) {
                flex-grow: 1;
                display: flex;
                text-decoration: none;
                align-items: center;
            }

            &:nth-child(2) {
                @include lib.app-dropdown-toggle-x-padding-split;
                margin-left: 0;
                flex-grow: 0;
                border-left-width: 0;

                .fa {
                    font-size: 78%;
                    width: 0.78em; // prevents button size change on icon toggling

                    &.syncing {
                        color: $app-color-primary-light;
                        animation: app-keyframes-opacity 1s linear infinite;
                    }
                }
            }
        }
    }

    .fa {
        display: flex;
        align-self: center;

        &.fa-hand-pointer-o {
            margin-right: ($app-spacer-1 * 0.3);
        }

        &.fa-lock {
            margin-right: $app-spacer-1;
        }

        &.fa-unlock {
            margin-right: ($app-spacer-1 * 1.2);
        }
    }

    .login-delay {
        font-size: 80%;

        .fa ~ span {
            display: flex;
            align-self: center;
        }
    }
}
